<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>文档</title>
  <link rel="stylesheet" href="/static/vendor/layui/css/layui.css">
  <link rel="stylesheet" href="/static/api/style.css">
  <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
  <script src="/static/vendor/layui/layui.all.js"></script>
  <script src="/static/vendor/function.js"></script>
  <style>.layui-form-label{width:150px;}.layui-input-block{margin-left: 180px;}</style>
</head>
<body>
    <div class="layui-main" style="padding: 20px;border: 1px solid #eee;margin:100px;">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">原数据</label>
        <div class="layui-input-block">
          <input type="text" id='title' name="title" required  lay-verify="required" placeholder="请输入原数据" autocomplete="off" class="layui-input">
        </div>
      </div>
        <div class="layui-form-item">
          <label class="layui-form-label">加密</label>
          <div class="layui-input-block">
            <input id='jiami' type="text" value="" class="layui-input">
          </div>
        </div>
          <div class="layui-form-item">
            <label class="layui-form-label">解密</label>
            <div class="layui-input-block">
              <input id='jiemi' type="text" value="" class="layui-input">
            </div>
          </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="jiami">加密</button>
          <button class="layui-btn" lay-submit lay-filter="jiemi">解密</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    <br>
    <div class="layui-tab layui-tab-card" style="height:1000px;">
      <ul class="layui-tab-title">
        <li class="layui-this">加密函数</li>
        <li>解密函数</li>
        <li>签名函数</li>
        <li>app秘钥</li>
      </ul>
      <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <pre class="layui-code">
                /**
                * 简单对称加密算法之加密
                * @param String $string 需要加密的字串
                * @param String $skey 加密EKY
                * @return String
                */
                function encode($string = '', $key = 'abcd') {
                    $strArr = str_split(base64_encode($string));
                    $strCount = count($strArr);
                    foreach (str_split($skey) as $key => $value)
                        $key < $strCount && $strArr[$key].=$value;
                    return str_replace(array('=', '+', '/'), array('O0O0O', 'o000o', 'oo00o'), join('', $strArr));
                }
            </pre>
        </div>
        <div class="layui-tab-item">
                <pre class="layui-code">
                /**
                * 简单对称加密算法之解密
                * @param String $string 需要解密的字串
                * @param String $skey 解密KEY
                * @return String
                */
                function decode($string = '', $key = 'abcd') {
                    $strArr = str_split(str_replace(array('O0O0O', 'o000o', 'oo00o'), array('=', '+', '/'), $string), 2);
                    $strCount = count($strArr);
                    foreach (str_split($skey) as $key => $value)
                        $key <= $strCount  && isset($strArr[$key]) && $strArr[$key][1] === $value && $strArr[$key] = $strArr[$key][0];
                    return base64_decode(join('', $strArr));
                }
                </pre>
        </div>
        <div class="layui-tab-item">
            <pre class="layui-code">
                /**
                 * 签名
                 * @param unknown $data 数组
                 * @param unknown $keys app key值
                 * @return true or false
                 */
                function sign($data,$keys)
                {
                    #配置: '应用编号'=>'秘钥',
                    $app_config = [
                        "5100"=>'ios_app_secret',#ios
                        "5200"=>'android_app_secret',#安卓
                        "5300"=>'h5_app_secret',#h5
                        "5400"=>'pc_app_secret',#pc
                    ];
                    if(isset($data['sign'])) unset($data['sign']);
                    if(isset($data['app_key'])) unset($data['app_key']);
                    $temp_k = array_keys($data);
                    sort($temp_k);
                    $str = $keys;
                    foreach($temp_k as $k){
                        $str .= $k.$data[$k];
                    }
                    $str .= $app_config[$keys];
                    return strtoupper(sha1($str));
                }
            </pre>
        </div>
        <div class="layui-tab-item">
                <pre class="layui-code">
                    //应用app_key,  app_secret  : 用于签名算法
                    "5100"=>'ios_app_secret',#ios
                    "5200"=>'android_app_secret',#安卓
                    "5300"=>'h5_app_secret',#h5
                    "5400"=>'pc_app_secret',#pc
                </pre>
        </div>
      </div>
    </div>
</div>

    <script>
    //Demo
    layui.use('form', function(){
      var form = layui.form;

      //监听加密
      form.on('submit(jiami)', function(data){
          var data = {title:$("#title").val()};
          data['type'] = 0;
          $.ajax({
              method:'post',
              url:'/docs/jiami',
              data:data,
              dataType:'json',
              success:function(res){
                  $("#jiami").val(res.data.data).focus();
                  $("#jiemi").val('');
              }
          });
        return false;
      });


      //监听解密
      form.on('submit(jiemi)', function(data){
          var data = {title:$("#title").val()};
          data['type'] = 1;
          $.ajax({
              method:'post',
              url:'/docs/jiami',
              data:data,
              dataType:'json',
              success:function(res){
                  $("#jiami").val('');
                  $("#jiemi").val(res.data.data).focus();
              }
          });
        return false;
      });
    });
    </script>
</body>
</html>
